<template>
	<view>
		<button class="refresh-btn" :class="{'rotate': isRotating}" :disabled="isRotating" @click="refresh"
			:style="{ backgroundColor: theme.themes[theme.currentThemeIndex].accentColor }">
			<up-icon name="reload" :color="iconColor" size="50rpx"></up-icon>
		</button>
	</view>
</template>

<script>
	import {
		useMemoStore
	} from '@/stores/memoStore'
	import {
		themeColor
	} from '@/stores/themeColor'
	import {
		advices
	} from '@/stores/advices'
	import {
		mapInfo
	} from '@/stores/mapInfo'

	export default {
		data() {
			return {
				isRotating: false
			};
		},
		
		computed: {
			// 根据当前主题计算图标颜色
			iconColor() {
				return themeColor().currentThemeIndex === 2 ? '#121212' : '#FFF';
			},
			theme() {
				return themeColor();
			}
		},
		
		methods: {
			async refresh() {
				if (this.isRotating) return;

				this.isRotating = true;
				uni.startPullDownRefresh();

				try {
					await useMemoStore().getMemoList()
					await advices().getAdvices()
					await mapInfo().getNoticeInfo()
				} finally {
					setTimeout(() => {
						this.isRotating = false;
					}, 800); // 保持旋转状态至少0.8秒
					uni.stopPullDownRefresh();
				}
			}
		}
	}
</script>

<style lang="scss">
	.refresh-btn {
		display: flex;
		position: fixed;
		bottom: 150rpx;
		right: 20rpx;
		width: 125rpx;
		height: 125rpx;
		border-radius: 50%;
		justify-content: center;
		align-items: center;
		font-weight: bold;
		box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.2);
		border: none;
		transition: transform 0.3s ease-out;
		z-index: 1000;
		padding: 0; // 移除按钮默认内边距

		&:active {
			transform: scale(0.95);
		}

		&.rotate {
			animation: spin 800ms linear;
			opacity: 70%;
		}
	}

	@keyframes spin {
		from {
			transform: rotate(0deg);
		}

		to {
			transform: rotate(360deg);
		}
	}
</style>